<template>
  <div>
    <div class="service">
      <ul>
        <li
          v-for="(item, index) in title"
          :key="index"
          class="icon-VIP iconfont"
        >
          <div class="lis">
            <p>
              <span
                :class="item.icon"
                :style="'color:' + item.color"
                class="iconfont span"
              ></span
              >{{ item.title }}
            </p>
            <van-icon name="arrow" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "VantMylist",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
  props: {
    title: {
      type: Array,
    },
  },
};
</script>

<style scoped>
.service ul li {
  height: 1.333333rem;
  line-height: 1.333333rem;
}
.service ul li:active {
  background-color: #ddd;
}
.service ul li:nth-child(1) {
  margin-top: 0.266667rem;
}
.service ul li .lis {
  display: flex;
  justify-content: space-between;
  font-size: 0.426667rem;
  font-weight: 500;
}
.span {
  margin: 0 0.266667rem 0 0.266667rem;
}
.van-icon {
  height: 1.333333rem;
  line-height: 1.333333rem;
  margin-right: 0.266667rem;
}
</style>